<extend name="Public/base" />
<block name="main">
	<php>$types=config('USER_TYPE');</php>
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-content" style="border-color: #e7eaec;border-width: 4px 0 0;">
					<div class="row">
						<form method="get">
							<div class="col-sm-3 m-b-xs">
								<div class="input-daterange input-group" id="datepicker">
									<input type="text" class=" form-control" name="start_time" value="{$start_time_str}" placeholder="开始时间" onkeyup="filter(this)"/>
									<span class="input-group-addon">到</span>
									<input type="text" class=" form-control" name="end_time" value="{$end_time_str}" placeholder="结束时间" onkeyup="filter(this)"/>
								</div>
							</div>
							<div class="col-sm-1">
								<button type="submit" class="btn btn-primary"><span class="fa fa-search"></span> 确定</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-content" style="border-color: #e7eaec;border-width: 4px 0 0;">
					<div class="row">
						<div class="col-sm-3">{$types[0]}订单数：{$topData.user}</div>
						<div class="col-sm-3">{$types[1]}订单数：{$topData.first}</div>
						<div class="col-sm-3">{$types[2]}订单数：{$topData.noFirst}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>订单统计</h5>
				</div>
				<div class="ibox-content">
					<div class="row">
						<div class="col-sm-12">
							<div class="chart">
								<div id="statistics" style="height: 400px;"></div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</block>
<block name="js">
	<script src="__PUBLIC__/dist/js/plugins/echarts/echarts-all.js"></script>
	<script>
		$('#datepicker').datepicker();
		var res = {$res};
		var myChart = echarts.init(document.getElementById('statistics'), 'macarons');
		var data = ["{$types[0]}", "{$types[1]}", "{$types[2]}"];
		option = {
			tooltip: {
				trigger: 'axis'
			},
			toolbox: {
				show: true,
				feature: {
					magicType: {
						show: true,
						type: ['line', 'bar']
					},
					saveAsImage: {
						show: true
					}
				}
			},
			calculable: true,
			legend: {
				data: data
			},
			xAxis: [{
				type: 'category',
				data: res.time
			}],
			yAxis: [{
				type: 'value',
				name: '订单数',
				axisLabel: {
					formatter: '{value}'
				}
			}],
			series: [{
					name: "{$types[0]}",
					type: 'line',
					data: res.user
				},
				{
					name: "{$types[1]}",
					type: 'line',
					data: res.first
				},
				{
					name: "{$types[2]}",
					type: 'line',
					data: res.noFirst
				}
			]
		};
		myChart.setOption(option);
	</script>
</block>